<template>
    <div :class="remember == true ? 'containt2' : 'containt'">
        <nav-com :title="title" :showView='true' @back="backHandler()"></nav-com>
        <!-- TIPS -->
        <div class="box1" v-if="step == 0">
            <div class="box1-div1">
                <div>您是否记得账号<span>{{ userInfo.mobile | mobileFilter }}</span></div>
                <div>当前使用的支付密码</div>
            </div>
            <div class="box1-btns">
                <div class="box1-btn" @click="opetEvent(1)">不记得</div>
                <div class="box1-btn btActive" @click="opetEvent(2)">记得</div>
            </div>
        </div> <!-- TIPS -->
        <!-- remember = true -->
        <div class="box2">
            <div v-if="step == 1">
                <div class="box2-top">
                    <div style="font-size: 22px;line-height: 10vh;">输入短信验证码</div>
                    <div style="font-size: 14px;line-height: 5vh;">我们已发送短信验证码到你的手机号</div>
                    <div style="font-size: 18px;line-height: 5vh;">{{ userInfo.mobile | mobileFilter }}</div>
                </div>
                <div class="verification">
                    <van-password-input length="4"  :value="verification" :error-info="errorInfo" :gutter="10"
                        :focused="showKeyboard" @focus="showKeyboard = true" />
                    <!-- 数字键盘 -->
                    <van-number-keyboard v-model="verification" @hide="onBlurEvent(1)" :show="showKeyboard"
                        @input="onVerificationInput" />
                </div>
                <div class="box2-bottom" style="margin-top: 15px;">
                    <div class="box2-repeat" @click="postVerificationcodes()" v-if="step == 1">重发短信</div>
                    <div class="box2-next unchecked" style="margin-bottom: 15px!important;margin-top: 15px;" v-if="verification.length != 4">下一步</div>
                    <div class="box2-next" style="margin-bottom: 15px!important;margin-top: 15px;"  v-if="verification.length == 4" @click="nextSub()">下一步</div>
                    <div class="box2-repeat"  v-if="title == '修改支付密码'"  @click="payPassWordShow = true">手机号遗失，无法获取验证码？</div>
                    <div class="box2-repeat"   style="margin-top: 10px;color: #000000;"  v-if="shareUser.staff == 2" >测试账号验证码请输入"1111"</div>
                </div>
            </div>
            <div v-if="step == 2">
                <!-- 旧密码 -->
                <div class="box2-top">
                         <div style="font-size: 16px;line-height: 5vh;margin-top: 5vh;">请输入账号 <span style="font-size: 18px;">{{ userInfo.mobile | mobileFilter }}</span></div>
                         <div style="font-size: 14px;line-height: 5vh;margin-bottom: 5vh;">4位旧的支付密码</div>
                </div>
                <div class="verification">
                    <van-password-input length="4"  :value="oldpassword" :error-info="errorInfo" :gutter="10"
                        :focused="showKeyboard" @focus="showKeyboard = true" />
                    <!-- 数字键盘 -->
                    <van-number-keyboard maxlength="4" v-model="oldpassword" @hide="onBlurEvent(2)" :show="showKeyboard"
                        @input="onVerificationInput" />
                </div>
                <div class="box2-bottom">
                    <div class="box2-repeat" style="color:#333333;font-size: 14px;">支付密码不能使用重复、连续的数字</div>
                    <div class="box2-next unchecked" v-if="(oldpassword.length != 4)">下一步</div>
                    <div class="box2-next" v-if="(oldpassword.length == 4)" @click="nextSub()">下一步</div>

                </div>
            </div>
            <div v-if="step == 3">
                <div class="box2-top">
                    <div style="font-size: 14px;line-height: 5vh;margin-top: 5vh;">请为账号 <span
                            style="font-size: 18px;">{{ userInfo.mobile | mobileFilter }}</span></div>
                    <div style="font-size: 14px;line-height: 5vh;margin-bottom: 5vh;">设置4位数字支付密码</div>
                </div>

                <div class="verification">
                    <van-password-input length="4"  :info="errorInfo" :value="password" :error-info="errorInfo" :gutter="10"
                        :focused="showKeyboard" @focus="showKeyboard = true" />
                    <!-- 数字键盘 -->
                    <van-number-keyboard  maxlength="4" v-model="password" @hide="onBlurEvent(3)" 
                        :show="showKeyboard" />
                </div>
                <div class="box2-bottom">
                    <div class="box2-next unchecked" v-if="(password.length != 4)">下一步</div>
                    <div class="box2-next" v-if="(password.length == 4)" @click="nextSub()">下一步</div>
                </div>
            </div>
            <div v-if="step == 4">
                <div class="box2-top">
                    <div style="font-size: 22px;line-height: 5vh;margin:7.5vh  0;">请再次输入支付密码</div>
                </div>

                <div class="verification">
                    <van-password-input length="4"  :info="errorInfo" :value="repassword" :error-info="errorInfo" :gutter="10"
                        :focused="showKeyboard" @focus="showKeyboard = true" />
                    <!-- 数字键盘 -->
                    <van-number-keyboard maxlength="4" v-model="repassword" @hide="onBlurEvent(4)" 
                        :show="showKeyboard" />
                </div>
                <div class="box2-bottom">
                    <div class="box2-next unchecked" v-if="(repassword.length != 4)">下一步</div>
                    <div class="box2-next" v-if="(repassword.length == 4)" @click="nextSub()">下一步</div>
                </div>
            </div>


        </div>
        <!-- remember = true -->

            <!-- 支付密码 -->
    <van-popup closeable style="background: #F5F5F5;border-radius: 10px; top: 40%;" v-model="payPassWordShow" @close="payPassWordShow = false"
      position="center">
      <div class="payPassWord">
        <div class="title" style="text-align: center;font-size: 18px;line-height: 25px;">
          {{ payPassWordTitle }}
        </div>
        <div class="center">
          <div style="font-size: 14px;display: flex;
          max-height: 20vh;
          margin: 7vh 10vw;
          text-align: center;">
            {{ payPassWordCenter }}
          </div>
        </div>
        <div class="btns"  style="display: flex;justify-content: space-evenly;">
          <div style="width: 35vw;
            padding: 10px 0;
            text-align: center;
            border: 1px solid #D7D7D7;
            border-radius: 5px;
            color: #000000;" @click="payPassWordShow = false">取消</div>
            <div style="width: 35vw;
            padding: 10px 0;
            background: #FE4B20;
            text-align: center;
            border-radius: 5px;
            color: #fff;" @click="toTransferAccount()">去转户</div>
        </div>
      </div>
    </van-popup>
    </div>
</template>

<script>
import { setPassWd, getFttuserUserId2, postVerificationcodes, smsCheck,getuserInfo } from "@/api/api";
import navCom from "@/component/nav";
import { getEventListeners } from "events";
import { Toast } from "vant";
import { PasswordInput, NumberKeyboard } from 'vant';
export default {
    filters: {
        mobileFilter(val) {
            if (val == "" || val == undefined) {
                return "无";
            }
            let tell = /(\d{3})\d*(\d{4})/;
            let num = val.replace(tell, "$1****$2");

            return num;
        }
    },
    components: {
        navCom,
    },
    data() {
        return {
            payPassWordShow:false,
            payPassWordTitle: "修改支付密码",
             payPassWordCenter: "手机号遗失，无法修改支付密码， 您确认要进行转户吗?",
            title:"",
            verification: "",
            showView: true,
            list: [],
            title: "",
            remember: "",
            password: "",
            repassword: "",
            oldpassword:"",
            showKeyboard: false,
            nextShow: false,
            errorInfo: "",
            userInfo: {},
            shareUser:{},
            step: null,

        };
    },
    async mounted() {
     // this.getPayPassWord()




    },
    created() {
        this.title = "";
        // this.init();

        let noSendTime = localStorage.getItem("noSendTime");
        let noTime=new Date().valueOf();
        if(noSendTime == null || noSendTime == "null"){
            this.errNum=2;
        }else if(noTime > noSendTime){
            localStorage.setItem("noSendTime",null);
            this.errNum=2;
        }else if(noTime < noSendTime){
            this.errNum=0;
        }
        console.log(this.errNum,(noSendTime == null || noSendTime == "null"));
        console.log("noSendTime",noSendTime);
        console.log("noTime",noTime);
        console.log("noTime",noTime<noSendTime);

        this.getUserInfo()
    },
    methods: {
        toTransferAccount(){
            this.$router.push("/transferAccount");
        },

        backHandler() {//返回上一级
            this.$router.go(-1);
        },

        getPayPassWord(){
            setPassWd({
                      event: "info",
            }).then(res => {
                    console.log("getPayPassWord", res);
                    if(res.data.code == 1){
                         this.title="修改支付密码";
                         this.step = 0;
                         this.remember = false;
                    }else{
                         this.title="设置支付密码";
                         this.step = 1;
                         this.remember = true;
                         this.postVerificationcodes();
                    }
                })
          },

        opetEvent(event) {
            this.remember=true;
            if (event == 1) {//0 忘记密码
                this.step = 1;
                this.postVerificationcodes();
                //发送短信
            }
            if (event == 2) {//1 记得密码
                this.step = 2;
                //发送短信
            }
        },
        nextSub() {
            console.log("nextSub", this.step);
            if (this.step == 1) {
                this.smsCheck();
                // this.step = 3;
                return;
            }
            if (this.step == 2) {
                this.confirmPassWd();
                //
                return;
            }
            if (this.step == 3) {
                let reg = /^(\d)\1{5}$/; // 不重复6位 类似111111,222222
                if (this.password.length !== 4) {
                    Toast('无效密码')
                    return;
                } else if (reg.test(this.password)) {
                    this.errorInfo = "支付密码不能使用重复的数字"
                    return;
                } else {
                    this.errorInfo = ""
                    this.step = 4;
                    return;
                }
            }
            if (this.step == 4) {
                let reg = /^(\d)\1{5}$/; // 不重复6位 类似111111,222222
                if (this.repassword.length !== 4) {
                    Toast('无效密码')
                    return;
                } else if (reg.test(this.repassword)) {
                    this.errorInfo = "支付密码不能使用重复的数字"
                    return;
                } else if (this.repassword != this.password) {
                    this.errorInfo = "两次密码不一致,请再次输入"
                    return;
                } else {
                    this.setPassWd();
                    // this.errorInfo = ""
                    // this.step=4;
                    // return;

                }
            }
        },
        getUserInfo() {//获取用户信息
            getFttuserUserId2().then((res) => {
                console.log("getFttuserUserId2",res);
                this.userInfo = res.data.data;
                this.getPayPassWord()
            }).catch((err) => {

            });
             //获取用户信息
            getuserInfo().then((res) => {
                console.log("getuserInfo", res);
                if (res.data.code == 1) {
                this.shareUser = res.data.data;
                }
                });
        },
        onVerificationInput(event) {
            console.log(event, this.verification.length);
            if (this.verification.length == 4) {
                this.showKeyboard = false
            }else if(this.verification.length == 3 && this.step == 1){
                this.verification=this.verification+event;
                this.smsCheck();
            }
        },
        onBlurEvent(event) {
            console.log("onBlurEvent", event)
            this.showKeyboard = false
            if (event == 1) {
                if (this.verification.length !== 4) {
                    Toast('无效验证码')
                } else {
                    this.nextShow = true;
                }
            } else if (event == 2) {
                let reg = /^(\d)\1{5}$/; // 不重复6位 类似111111,222222
                if (this.password.length !== 4) {
                    Toast('无效密码')
                } else if (reg.test(this.password)) {
                    this.errorInfo = "支付密码不能使用重复、连续的数字"
                } else {
                    this.errorInfo = ""
                    this.nextShow = true;
                }
            } else if (event == 3) {

            }

        },
        postVerificationcodes() {
            if(this.errNum == 0){
                Toast("输入错误次数过多,请三个小时后再试")
                this.verification="";
                return;
            }

            postVerificationcodes({ mobile: this.userInfo.mobile, event: 'resetpwd' }).then(res => {
                console.log("paypasswdreset", res);
                Toast(res.data.msg)
                if (res.data.code == 1) {

                }else {
                    if(res.data.msg=="发送频繁"){
                        return;
                    }

                }
            })
        },
        smsCheck(){
            smsCheck({ event: 'resetpwd',mobile: this.userInfo.mobile,event: 'resetpwd',captcha:this.verification }).then(res => {
                console.log("smsCheck", res);
                // Toast(res.data.msg)
                if (res.data.code == 1) {
                    this.step = 3;
                } else {
                    if(this.errNum == 2){
                        Toast("输入错误,还有两次机会");
                        this.errNum = 1;
                        this.verification="";
                        return;
                    }else if(this.errNum == 1){
                        Toast("输入错误,还有一次机会")
                        this.errNum = 0;
                        this.verification="";
                        return;
                    }else{
                        var expireTime =(new Date()).valueOf() + 30*1000; // 过期时间为60s
                        localStorage.setItem("noSendTime",expireTime);
                        Toast("输入错误次数过多,请三个小时后再试")
                        this.verification="";
                        return;
                    }
                }
            })
        },
        setPassWd() {
            var data={};
            if(this.verification!=""){
                // data.code=this.verification
                data.event="set"
                data.new_pwd=this.repassword

            }else{
                data.event="edit"
                data.pwd=this.oldpassword
                data.new_pwd=this.repassword
            }
            setPassWd(data).then(res => {
                console.log("setPassWd", res);

                if(res.data.code == 1){
                    Toast("设置支付密码成功")
                    this.backHandler()
                }else{
                    Toast(res.data.msg);
                }
            })
        },
        confirmPassWd() {
            setPassWd({
                event: "confirm",
                pwd: this.oldpassword,
            }).then(res => {
                console.log("confirmPassWd", res);
                if(res.data.code == 1){
                    this.step = 3;
                }else{
                    Toast(res.data.msg)
                    this.oldpassword="";
                }
            })
        }

    },
};
</script>

<style scoped>
/deep/ .van-password-input__security {
  justify-content: space-around;
}

/deep/ .van-password-input__security li {
  max-width: 36px !important;
  max-height: 36px !important;
  background-color: #EFEFEF;
}

/deep/ .van-password-input__info {
  color: #333333;
  font-size: 14px;
}

/deep/ .van-hairline--surround::after {
  border-width: 1px;
  border: 0 solid transparent;
}

/deep/ .van-number-keyboard {
  z-index: 100;
}
.payPassWord {
  width: 80vw;
  padding: 20px 10px;
}

</style>

<style scoped>
/deep/ .van-password-input__security {
    justify-content: space-around;
}

/deep/ .van-password-input__security li {
    max-width: 44px !important;
    max-height: 44px !important;
    background-color: #EFEFEF;
}

/deep/ .van-password-input__info {
    color: #333333;
    font-size: 14px;
}

/deep/ .back_box {
    border-bottom: 1px solid #D7D7D7;
}
</style>

<style scoped>
.containt {
    border-top: 1px solid #f8f8f8;
    background: #F8F8F8;
    min-height: 100vh;
}

.containt2 {
    background: #ffff;
}

.box1 {}

.box1-div1 {
    display: flex;
    color: #333333;
    font-size: 14px;
    background-color: #fff;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    line-height: 30px;
}

.box1-div1 span {
    font-size: 18px;
    padding-left: 5px;
}

.box1-btns {
    display: flex;
    justify-content: space-around;
    margin: 0 40px;
    margin-top: 15vh;
}

.box1-btn {
    background: #fbfbfb;
    border-radius: 4px;
    width: 35vw;
    text-align: center;
    line-height: 45px;
    border: 1px solid #D7D7D7;
    color: #000000;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 500;
}

.btActive {
    background-color: #FE4B20;
    color: #fff;
}

.box2 {}

.box2-top {
    display: flex;
    flex-direction: column;
    color: #333333;
    align-items: center;
    margin-bottom: 20px;
    max-height: 20vh;
}

.box2-bottom {
    margin-top: 30px;
}

.box2-repeat {
    text-align: center;
    color: #3A6DFF;
    font-size: 16px;
    font-weight: 500;
}

.box2-next {
    width: 80vw;
    line-height: 44px;
    background: #FE4B20;
    border-radius: 4px;
    text-align: center;
    color: #fff;
    margin: 0 auto;
    margin-top: 30px;
}

.unchecked {
    background: #FE4B20;
    opacity: 0.5;
}
</style>
